<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item label="账号名" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-input type="text" autocomplete="false" :style="{ width: '310px' }" :value="accountName" disabled> </a-input>
      </a-form-item>
      <a-form-item label="手机" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-input
          type="text"
          autocomplete="false"
          :style="{ width: '310px' }"
          placeholder="请输入手机号"
          :value="phone"
          disabled
        >
          <a-icon slot="prefix" type="phone" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-item>

      <a-form-item label="验证码" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-row :gutter="16" style="margin-left: 35px">
          <a-col class="gutter-row" :span="10">
            <a-input
              style="width:100%"
              type="text"
              :maxLength="6"
              name="captcha"
              placeholder="手机短信验证码"
              v-decorator="['captcha', validatorRules.captcha]"
            ></a-input>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <a-button
              tabindex="-1"
              size="default"
              :disabled="state.smsSendBtn"
              @click.stop.prevent="getCaptcha"
              v-text="(!state.smsSendBtn && '获取验证码') || state.time + ' s'"
            ></a-button>
          </a-col>
        </a-row>
      </a-form-item>

      <a-form-item :wrapperCol="{ span: 19, offset: 5 }">
        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
        <a-button type="primary" @click="nextStep" style="margin-left: 20px">下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { postAction } from '@/api/action'

export default {
  name: 'Step2',
  props: ['userList'],
  data() {
    return {
      form: this.$form.createForm(this),
      accountName: this.userList.username,
      phone: this.userList.phone,
      dropList: '0',
      captcha: '',
      state: {
        time: 60,
        smsSendBtn: false
      },
      validatorRules: {
        captcha: {
          rule: [{ required: true, message: '请输入短信验证码!' }]
        }
      }
    }
  },
  methods: {
    nextStep() {
      let that = this
      // that.loading = true
      this.form.validateFields((err, values) => {
        console.log(values)
        if (!err) {
          // if (that.dropList == '0') {
          //   if (values.captcha == undefined) {
          //     // this.cmsFailed('请输入短信验证码!')
          //   } else {
          //     var params = {}
          //     params.phone = this.userList.phone
          //     params.smscode = values.captcha
          //   }
        }
      })
    },

    /** 上一步 */
    prevStep() {
      this.$emit('prevStep', this.userList)
    },

    /* 获取短信验证码 */
    getCaptcha(e) {
      e.preventDefault()
      let that = this
      this.state.smsSendBtn = true
      let interval = window.setInterval(() => {
        if (that.state.time-- <= 0) {
          that.state.time = 60
          that.state.smsSendBtn = false
          window.clearInterval(interval)
        }
      }, 1000)

      const hide = this.$message.loading('验证码已发送..', 0)
      let smsParams = {
        mobile: this.userList.phone,
        smsmode: '2' //忘记密码
      }

      postAction('/account/sms/send', smsParams).then(res => {
        if (res.code != 0) {
          setTimeout(hide, 1)
          this.cmsFailed(res.message)
        }
        setTimeout(hide, 500)
      })
    },

    /**
     * 验证码发送错误
     */
    cmsFailed(err) {
      this.$notification['error']({
        message: '验证错误',
        description: err,
        duration: 4
      })
    },

    handleChangeSelect(value) {
      var that = this
      console.log(value)
      if (value == 0) {
        that.dropList = '0'
        that.show = true
      } else {
        that.dropList = '1'
        that.show = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.getCaptcha {
  display: block;
  width: 100px;
  height: 30px;
  background: transparent;
  border: none;
  overflow: hidden;
  outline: none;
  color: #fff;
  background-color: #1890ff;
  border: 1px solid #1890ff;
  border-radius: 0 4px 4px 0;
}

.stepFormText {
  margin-bottom: 24px;
}
.ant-form-item-label,
.ant-form-item-control {
  line-height: 22px;
}

.getCaptcha {
  display: block;
  width: 100%;
  height: 40px;
}
</style>
<style lang="scss">
.get-captcha-wrap {
  .ant-input-group-addon {
    padding: 0;
  }
}
</style>
